import React,{Component,Fragment} from 'react'
import {Card} from 'antd'
import ReactEcharts from 'echarts-for-react'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'

import echarts from 'echarts'
import theme from './../themeLight.js'

echarts.registerTheme('themeLight', theme);

export default class Line extends Component {
    //柱状图一
    getOption = {
        title: {
            text: '用户骑行订单',
            textStyle: {
                color: '#cccccc'
            }
        },
        tooltip: {
            trigger:'axis',
            //formatter:'{b}<br/>订单量:{c}'
        },
        xAxis: {
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            name:'订单量',
            data: [1000, 2000, 1500, 3000, 2000, 1200, 800],
            type: 'line'
        }]
    }
    //柱状图二
    getOption2 = {
        title: {
            text: '用户骑行订单',
            textStyle: {
                color: '#cccccc'
            }
        },
        legend: {
            data: ['ofo订单量', '摩拜订单量','小蓝订单量']
        },
        tooltip: {
            trigger:'axis',
            //折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
            //formatter:'{b}<br/>{a0}:{c0}<br/>{a1}:{c1}<br/>{a2}:{c2}'
        },
        xAxis: {
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [2000, 3000, 5500, 7000, 8000, 12000, 20000],
                type: 'line',
                name:'ofo订单量'
            },{
                data: [1500, 3000, 4500, 6000, 8000, 10000, 15000],
                type: 'line',
                name:'摩拜订单量'
            },{
                data: [1000, 2000, 2500, 4000, 6000, 7000, 8000],
                type: 'line',
                name:'小蓝订单量'
            }
        ]
    }
    getOption3 = {
        title: {
            text: '用户骑行订单',
            textStyle: {
                color:'#cccccc'
            }
        },
        tooltip: {
            trigger:'axis',
            //formatter:'{b}<br/>订单量:{c}'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            name:'订单量',
            data: [1000, 2000, 1500, 3000, 2000, 1200, 800],
            type: 'line',
            areaStyle: {}
        }]
    }
    render(){
        return (
            <Fragment>
                <Card title="折线图表之一">
                    <ReactEcharts 
                        option={this.getOption}
                        style={{height:500}}
                        theme='themeLight' 
                    />
                </Card>
                <Card title="折线图表之二" style={{marginTop:10}}>
                    <ReactEcharts 
                        option={this.getOption2}
                        style={{height:500}}
                        theme='themeLight' 
                    />
                </Card>
                <Card title="折线图表之三" style={{marginTop:10}}>
                    <ReactEcharts 
                        option={this.getOption3}
                        style={{height:500}}
                        theme='themeLight' 
                    />
                </Card>
            </Fragment>
        )
    }
}